<template>
  <div class="login-form">
    <!-- 登录表单 -->
    <form @submit.prevent="handleSubmit" class="space-y-6">
      <!-- 用户名/邮箱输入 -->
      <div class="form-control">
        <label class="label">
          <span class="label-text font-medium">{{ usernameLabel }}</span>
        </label>
        <div class="relative">
          <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
            <span class="text-base-content/50">{{ usernameIcon }}</span>
          </div>
          <input
            v-model="formData.username"
            type="text"
            :placeholder="usernamePlaceholder"
            class="input input-bordered w-full pl-10"
            :class="inputClass"
            :disabled="loading"
            required
          />
        </div>
      </div>

      <!-- 密码输入 -->
      <div class="form-control">
        <label class="label">
          <span class="label-text font-medium">{{ passwordLabel }}</span>
        </label>
        <div class="relative">
          <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
            <span class="text-base-content/50">{{ passwordIcon }}</span>
          </div>
          <input
            v-model="formData.password"
            :type="showPassword ? 'text' : 'password'"
            :placeholder="passwordPlaceholder"
            class="input input-bordered w-full pl-10 pr-10"
            :class="inputClass"
            :disabled="loading"
            required
          />
          <button
            type="button"
            @click="togglePasswordVisibility"
            class="absolute inset-y-0 right-0 pr-3 flex items-center text-base-content/50 hover:text-base-content transition-colors"
            :disabled="loading"
          >
            <span class="text-lg">{{ showPassword ? '🙈' : '👁️' }}</span>
          </button>
        </div>
      </div>

      <!-- 记住我 -->
      <div v-if="showRememberMe" class="form-control">
        <label class="label cursor-pointer justify-start gap-3">
          <input
            v-model="formData.rememberMe"
            type="checkbox"
            class="checkbox checkbox-primary checkbox-sm"
            :disabled="loading"
          />
          <span class="label-text">{{ rememberMeText }}</span>
        </label>
      </div>

      <!-- 忘记密码链接 -->
      <div v-if="showForgotPassword" class="text-right">
        <button
          type="button"
          @click="handleForgotPassword"
          class="link link-primary text-sm"
          :disabled="loading"
        >
          {{ forgotPasswordText }}
        </button>
      </div>

      <!-- 错误提示 -->
      <div v-if="errorMessage" class="alert alert-error">
        <span class="text-sm">{{ errorMessage }}</span>
      </div>

      <!-- 提交按钮 -->
      <div class="form-control">
        <button
          type="submit"
          class="btn btn-primary w-full"
          :class="submitButtonClass"
          :disabled="loading || !isFormValid"
        >
          <span v-if="loading" class="loading loading-spinner loading-sm mr-2"></span>
          {{ loading ? loadingText : submitText }}
        </button>
      </div>

      <!-- 其他登录方式 -->
      <div v-if="showSocialLogin" class="space-y-4">
        <div class="divider text-sm text-base-content/60">或者使用</div>

        <div class="grid grid-cols-2 gap-3">
          <button
            v-if="showGoogleLogin"
            type="button"
            @click="handleGoogleLogin"
            class="btn btn-outline btn-sm"
            :disabled="loading"
          >
            <span class="mr-2">🔍</span>
            Google
          </button>

          <button
            v-if="showGithubLogin"
            type="button"
            @click="handleGithubLogin"
            class="btn btn-outline btn-sm"
            :disabled="loading"
          >
            <span class="mr-2">🐙</span>
            GitHub
          </button>
        </div>
      </div>

      <!-- 注册链接 -->
      <div v-if="showRegisterLink" class="text-center">
        <span class="text-sm text-base-content/70">{{ registerPrefixText }}</span>
        <button
          type="button"
          @click="handleRegister"
          class="link link-primary text-sm ml-1"
          :disabled="loading"
        >
          {{ registerText }}
        </button>
      </div>
    </form>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, reactive } from 'vue'

/**
 * 登录表单业务组件
 * 提供完整的登录功能，包括表单验证、社交登录等
 */

interface LoginFormData {
  username: string
  password: string
  rememberMe: boolean
}

interface LoginFormProps {
  /** 用户名标签 */
  usernameLabel?: string
  /** 用户名占位符 */
  usernamePlaceholder?: string
  /** 用户名图标 */
  usernameIcon?: string
  /** 密码标签 */
  passwordLabel?: string
  /** 密码占位符 */
  passwordPlaceholder?: string
  /** 密码图标 */
  passwordIcon?: string
  /** 是否显示记住我 */
  showRememberMe?: boolean
  /** 记住我文本 */
  rememberMeText?: string
  /** 是否显示忘记密码 */
  showForgotPassword?: boolean
  /** 忘记密码文本 */
  forgotPasswordText?: string
  /** 是否显示社交登录 */
  showSocialLogin?: boolean
  /** 是否显示Google登录 */
  showGoogleLogin?: boolean
  /** 是否显示GitHub登录 */
  showGithubLogin?: boolean
  /** 是否显示注册链接 */
  showRegisterLink?: boolean
  /** 注册前缀文本 */
  registerPrefixText?: string
  /** 注册文本 */
  registerText?: string
  /** 提交按钮文本 */
  submitText?: string
  /** 加载文本 */
  loadingText?: string
  /** 加载状态 */
  loading?: boolean
  /** 自定义输入框样式类 */
  inputClass?: string
  /** 自定义提交按钮样式类 */
  submitButtonClass?: string
}

interface LoginFormEvents {
  /** 登录提交事件 */
  submit: [data: LoginFormData]
  /** 忘记密码事件 */
  forgotPassword: []
  /** Google登录事件 */
  googleLogin: []
  /** GitHub登录事件 */
  githubLogin: []
  /** 注册事件 */
  register: []
}

const props = withDefaults(defineProps<LoginFormProps>(), {
  usernameLabel: '用户名或邮箱',
  usernamePlaceholder: '请输入用户名或邮箱',
  usernameIcon: '👤',
  passwordLabel: '密码',
  passwordPlaceholder: '请输入密码',
  passwordIcon: '🔒',
  showRememberMe: true,
  rememberMeText: '记住我',
  showForgotPassword: true,
  forgotPasswordText: '忘记密码？',
  showSocialLogin: true,
  showGoogleLogin: true,
  showGithubLogin: true,
  showRegisterLink: true,
  registerPrefixText: '还没有账号？',
  registerText: '立即注册',
  submitText: '登录',
  loadingText: '登录中...',
  loading: false,
  inputClass: '',
  submitButtonClass: '',
})

const emit = defineEmits<LoginFormEvents>()

// 表单数据
const formData = reactive<LoginFormData>({
  username: '',
  password: '',
  rememberMe: false,
})

// 密码可见性
const showPassword = ref(false)

// 错误信息
const errorMessage = ref('')

// 表单验证
const isFormValid = computed(() => {
  return formData.username.trim().length > 0 && formData.password.length > 0
})

// 切换密码可见性
const togglePasswordVisibility = () => {
  showPassword.value = !showPassword.value
}

// 处理表单提交
const handleSubmit = () => {
  if (!isFormValid.value) return

  errorMessage.value = ''
  emit('submit', { ...formData })
}

// 处理忘记密码
const handleForgotPassword = () => {
  emit('forgotPassword')
}

// 处理Google登录
const handleGoogleLogin = () => {
  emit('googleLogin')
}

// 处理GitHub登录
const handleGithubLogin = () => {
  emit('githubLogin')
}

// 处理注册
const handleRegister = () => {
  emit('register')
}

// 设置错误信息
const setError = (message: string) => {
  errorMessage.value = message
}

// 清除错误信息
const clearError = () => {
  errorMessage.value = ''
}

// 重置表单
const resetForm = () => {
  formData.username = ''
  formData.password = ''
  formData.rememberMe = false
  errorMessage.value = ''
}

// 暴露方法给父组件
defineExpose({
  setError,
  clearError,
  resetForm,
  formData,
})
</script>

<style scoped>
.login-form {
  font-family:
    'Inter',
    'SF Pro Display',
    'SF Pro Text',
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    'Roboto',
    'Helvetica Neue',
    'Arial',
    sans-serif;
}

/* 输入框聚焦效果 */
.input:focus {
  border-color: hsl(var(--p));
  box-shadow: 0 0 0 3px hsl(var(--p) / 0.1);
}

/* 按钮悬停效果 */
.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px hsl(var(--p) / 0.3);
}

/* 链接悬停效果 */
.link:hover {
  text-decoration: underline;
}
</style>
